<template>
 <div class="easyd-weixin-Box">
  <div class="filterHeaderBox">
   <div class="filterText">筛选</div>
   <div class="filterInput">
    <input type="text" placeholder="请输入代理商名称" v-on:input="searchInputChange" v-model="searchValue">
   </div>
   <div class="filterSearch" @click="filterSearchClick">搜索</div>
  </div>
  <div class="agentMenuBox">
   <div
    class="agentMenuItem" :class="osType == 99 ? 'selected' : ''"
    v-if="$userData.getOsType() == '0'"
    @click="agentMenuClick(99)"
   >全部</div>
   <div class="agentMenuItem"  :class="osType == 0 ? 'selected' : ''" v-if="$userData.getOsType() == '0'" @click="agentMenuClick(0)">战略商</div>
   <div class="agentMenuItem"  :class="osType == 1 ? 'selected' : ''" @click="agentMenuClick(1)">代理商</div>
  </div>
  <div class="agentCountBox">共有:{{this.agentData.length}}位</div>
  <div class="agentListBox">
    <template v-if="osType == '99'">
      <div class="agentListItem" v-for="item in agentData">
        <div class="agentListInfoItem">
          <div class="agentItemName">
          {{item.os_name}}
          <span style="font-size:12px;color:#999;">({{item.osei_phone}})</span>
          </div>
          <div class="agentItemMoney">销售额：{{(item.buyMoney/10000).toFixed(2)}}万</div>
        </div>
        <div class="agentListInfoItem" style="font-size:12px;color:#999;margin-top:5px;">
          <div class="agentItemName">地址：{{item.osei_address == null ? '暂未录入地址信息' : item.osei_address}}</div>
          <div class="agentItemMoney">时间：{{$common.dateFormat("YYYY/MM/dd",item.osei_create_time)}}</div>
        </div>
        <div class="agentListValueItem">
          <div class="agentListValue">{{item.customerCount}}</div>
          <div class="agentListValue">{{item.readCount}}</div>
          <div class="agentListValue">{{item.buyCount}}</div>
          <div class="agentListValue">{{item.teamCount}}</div>
        </div>
        <div class="agentListKeyItem">
          <div class="agentListKey">客户数</div>
          <div class="agentListKey">阅读数</div>
          <div class="agentListKey">成交单数</div>
          <div class="agentListKey">团队人数</div>
        </div>
      </div>
   </template>
   <template v-if="osType == '0'">
      <div class="agentListItem" v-if="item.os_master_type == '1'" v-for="item in agentData">
        <div class="agentListInfoItem">
          <div class="agentItemName">
          {{item.os_name}}
          <span style="font-size:12px;color:#999;">({{item.osei_phone}})</span>
          </div>
          <div class="agentItemMoney">销售额：{{(item.buyMoney/10000).toFixed(2)}}万</div>
        </div>
        <div class="agentListInfoItem" style="font-size:12px;color:#999;margin-top:5px;">
          <div class="agentItemName">地址：{{item.osei_address == null ? '暂未录入地址信息' : item.osei_address}}</div>
          <div class="agentItemMoney">时间：{{$common.dateFormat("YYYY/MM/dd",item.osei_create_time)}}</div>
        </div>
        <div class="agentListValueItem">
          <div class="agentListValue">{{item.customerCount}}</div>
          <div class="agentListValue">{{item.readCount}}</div>
          <div class="agentListValue">{{item.buyCount}}</div>
          <div class="agentListValue">{{item.teamCount}}</div>
        </div>
        <div class="agentListKeyItem">
          <div class="agentListKey">客户数</div>
          <div class="agentListKey">阅读数</div>
          <div class="agentListKey">成交单数</div>
          <div class="agentListKey">团队人数</div>
        </div>
      </div>
   </template>
   <template v-if="osType == '1'">
      <div class="agentListItem" v-if="item.os_master_type == '2'" v-for="item in agentData">
        <div class="agentListInfoItem">
          <div class="agentItemName">
          {{item.os_name}}
          <span style="font-size:12px;color:#999;">({{item.osei_phone}})</span>
          </div>
          <div class="agentItemMoney">销售额：{{(item.buyMoney/10000).toFixed(2)}}万</div>
        </div>
        <div class="agentListInfoItem" style="font-size:12px;color:#999;margin-top:5px;">
          <div class="agentItemName">地址：{{item.osei_address == null ? '暂未录入地址信息' : item.osei_address}}</div>
          <div class="agentItemMoney">时间：{{$common.dateFormat("YYYY/MM/dd",item.osei_create_time)}}</div>
        </div>
        <div class="agentListValueItem">
          <div class="agentListValue">{{item.customerCount}}</div>
          <div class="agentListValue">{{item.readCount}}</div>
          <div class="agentListValue">{{item.buyCount}}</div>
          <div class="agentListValue">{{item.teamCount}}</div>
        </div>
        <div class="agentListKeyItem">
          <div class="agentListKey">客户数</div>
          <div class="agentListKey">阅读数</div>
          <div class="agentListKey">成交单数</div>
          <div class="agentListKey">团队人数</div>
        </div>
      </div>
   </template>
  </div>
 </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
 data() {
  return {
   osType: 99,
   searchValue:""
  };
 },
 computed: {
  ...mapState({
   agentData: state => state.AgentManagerModule.agentData,
   oldAgentData: state => state.AgentManagerModule.oldAgentData
  })
 },
 mounted() {
  this.initData();
 },
 methods: {
   searchInputChange(){
     if(this.searchValue == ''){
       this.getAllClick()
     }else{
       this.filterSearchClick()
     }
   },
   getAllClick(){
     this.$store.commit("AgentManagerModule/updateAgentData",this.oldAgentData)
   },
  filterSearchClick(){
    
    var tempArr = [];
    
    //进行数据筛选
    this.agentData.forEach(item => {

      //比对名称
      if(item.os_name.indexOf(this.searchValue) != -1){
        tempArr.push(item)
      } 

    });

    this.$store.commit("AgentManagerModule/updateAgentData",tempArr)
  },
  agentMenuClick(type) {
   this.osType = type;
  },
  agentAddGo() {
   this.$easyUtil.GO(this, "/agentAdd");
  },
  initData() {
   var params = {
    os_id: this.$userData.getOsid(),
    u_type: this.$userData.getOsType()
   };

   this.$easyUtil.startLoading(this);
   this.$http.postHttp(this.$API.agentManager, params, rs => {
    console.log(rs);
    this.$easyUtil.endLoading(this);
    this.$store.commit(
     "AgentManagerModule/updateAgentData",
     rs.strategicCooperationData
    );
    this.$store.commit(
     "AgentManagerModule/updateOldAgentData",
     rs.strategicCooperationData
    );
    
   });
  }
 }
};
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';

.agentListBox {
 padding: 0px 10px 0px 10px;

 .agentListItem {
  width: 100%;
  height: 130px;
  background: #fff;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;

  .agentListValueItem {
   margin-top: 15px;

   .agentListValue {
    float: left;
    width: 25%;
    text-align: center;
   }
  }

  .agentListKeyItem {
   margin-top: 10px;
   color: #999;

   .agentListKey {
    float: left;
    width: 25%;
    text-align: center;
   }
  }

  .agentListInfoItem {
   .agentItemName {
    float: left;
   }

   .agentItemMoney {
    float: right;
   }
  }
 }
}

.agentCountBox {
 width: 100%;
 height: 20px;
 margin-top: 5px;
 margin-bottom: 5px;
 padding-left: 10px;
 padding-right: 10px;
 box-sizing: border-box;
 line-height: 20px;
 font-size: 12px;
}

.agentMenuBox {
 width: 100%;
 height: 50px;
 background: #fff;
 display: flex;
 align-items: center;
 text-align: center;
 margin-top: 5px;

 .agentMenuItem {
  cursor: pointer;
  flex: 1;
 }

 .agentMenuItem.selected {
  color: #FAD236;
 }
}

.filterHeaderBox {
 width: 100%;
 height: 50px;
 background: #fff;
 display: flex;
 align-items: center;
 text-align: center;

 .filterText {
  width: 50px;
 }

 .filterInput {
  flex: 1;

  input {
   width: 100%;
   height: 100%;
   height: 32px;
   overflow: hidden;
   padding: 10px;
   border: none;
   -webkit-appearance: none;
   box-sizing: border-box;
   outline: none;
   border-radius: 10px;
   background: #eee;
   border: 1px solid #eee;
  }
 }

 .filterSearch {
  width: 50px;
  color: #FAD236;
 }
}
</style>